<template>
  <div class="boy">
    <div id="heade">
      <van-search
        class="heade"
        shape="round"
        background="#EC6941"
        v-model="value"
        show-action
        label="北京"
        placeholder="输入关键词"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="main">
      <div class="Block">
        <img src="../assets/img/组 11.png" alt />
      </div>
      <div class="ico">
       <div class="icon">
          <img src="../assets/img/护照 办理.png" alt />
        </div>
        <div class="icon">
          <img src="../assets/img/会员 购物.png" alt />
        </div>
        <div class="icon">
          <img src="../assets/img/水上 乐园.png" alt />
        </div>
      </div>
      <div class="title">
        <h1>热门活动</h1>
        <div class="spot" v-for="(item,index) in 4" :key="index">
          <div class="spot-lv1">
            <div class="spot-lv1-img">
              <img src="../assets/img/图层 2 拷贝 2.png" alt />
            </div>
            <div class="spot-lv1-p">
              <p>度假海岛</p>
              <div class="spot-lv1-p-p">
                <p>180元起</p>
                <p class="spot-lv1-p-p-p">立即抢购</p>
              </div>
            </div>
          </div>
          <div class="spot-lv1">
            <div class="spot-lv1-img">
              <img src="../assets/img/图层 2 拷贝 2.png" alt />
            </div>
            <div class="spot-lv1-p">
              <p>度假海岛</p>
              <div class="spot-lv1-p-p">
                <p>180元起</p>
                <p class="spot-lv1-p-p-p">立即抢购</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="gift-o">活动</van-tabbar-item>
      <van-tabbar-item icon="search">发现</van-tabbar-item>
      <van-tabbar-item icon="setting-o">分类</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      active: 1
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.boy {
  background: #f5f5f5;
  width: 375px;
}
img {
  width: 100%;
  height: 100%;
}
#heade {
  height: 138px;

  background: #ec6941;
}
.heade {
  padding-top: 20px;
}
.main {
  position: relative;
  top: -60px;
  padding: 0 20px;
}
.Block {
  width: 335px;
  height: 143px;
  border-radius: 10px;
  border: 0px solid black;
}
.ico {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.icon {
  width: 103px;
  height: 76px;
  border: black solid 0px;
}
.title h1 {
  padding-top: 17px;
  padding-bottom: 12px;
  font-size: 18px;
}
.spot {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.spot-lv1 {
  width: 157px;
  height: 176px;
}
.spot-lv1-img {
  width: 157px;
  height: 113px;
}
.spot-lv1-p {
  width: 146px;
  height: 50px;
  background: #ffffff;
  font-size: 16px;
  padding-top: 13px;
  padding-left: 11px;
}
.spot-lv1-p-p {
  display: flex;
  justify-content: space-between;

  font-size: 19px;
}
.spot-lv1-p-p-p {
  font-size: 11px;
  color: #ffffff;
  text-align: center;
  background: #ec6941;
  width: 53px;
  height: 18px;
  border-radius: 9px 0 0 9px;
}
</style>